@extends('layout.main')
@section('content')
    <form class="layui-form layui-row layui-col-space16">
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <input type="text" name="nick_name" value="" placeholder="昵称" class="layui-input" >
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-form-item">
                <input type="text" name="rid" placeholder="报告ID" lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-form-item">
                <div class="layui-inline" id="ID-laydate-rangeLinked">
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="start-created" name="start_created" class="layui-input" placeholder="开始日期">
                    </div>
                    <div class="layui-form-mid">~</div>
                    <div class="layui-input-inline">
                        <input type="text" autocomplete="off" id="end-created" name="end_created" class="layui-input" placeholder="结束日期">
                    </div>
                </div>

            </div>
        </div>
        <div class="layui-btn-container layui-col-xs12">
            <button class="layui-btn" lay-submit lay-filter="report-table-search">查询</button>
            <button type="reset" class="layui-btn layui-btn-primary">清除</button>
        </div>
    </form>

    <table class="layui-hide" id="report-list"></table>
@endsection

@section('script')
    <script type="text/html" id="wx_info">
        <a href="javascript:;"><img src="<% d.wx_headimgurl %>" class="layui-nav-img"></a>
        <a href="javascript:;"><% d.wx_nickname %></a>
    </script>

    <script type="text/html" id="toolBar">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="show">查看</button>
        <%# if(d.sync_status==0){ %>
        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" lay-event="sync">同步</button>
        <%# } %>
    </script>
    <script>
        layui.use(['table','form','laydate'], function(){
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#ID-laydate-rangeLinked',
                range: ['#start-created', '#end-created'],
                type:'datetime',
                rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
            });

            // 搜索提交
            form.on('submit(report-table-search)', function(data){
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('report-list', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                return false; // 阻止默认 form 跳转
            });

            // 已知数据渲染
            table.render({
                elem: '#report-list',
                cols: [[ //标题栏
                    {field: 'id', title: 'ID', width: 80},
                    {templet: '#wx_info',field: 'wxuser', title: '用户昵称', width: 300},
                    {field: 'foot_puid', title: '合作编码', width: 120},
                    {field: 'wx_openid', title: '微信openid', width: 220},
                    {field: 'foot_rid', title: '报告ID', width: 100},
                    {field: 'created_at', title: '创建时间', width: 200},
                    {fixed: 'right', title:'操作', width: 234, minWidth: 225, toolbar: '#toolBar'}
                ]],
                url:'{{ route('reports') }}',
                method:'post',
                //skin: 'line', // 表格风格
                even: true,
                parseData: function(res){ // res 即为原始返回的数据
                    return {
                        "code": res.status, // 解析接口状态
                        "msg": res.message, // 解析提示文本
                        "count": res.data.total, // 解析数据长度
                        "data": res.data.items // 解析数据列表
                    };
                },
                page: true, // 是否显示分页
                limits: [20, 50, 100],
                limit: 20 // 每页默认显示的数量
            });

            // 触发单元格工具事件
            table.on('tool(report-list)', function(obj){ // 双击 toolDouble
                var data = obj.data; // 获得当前行数据
                console.log(data)
                switch (obj.event) {
                    case 'show':
                        window.open('https://fwlab.xiaoaitech.com/report/report_x5?id='+data.foot_rid+'&puid='+data.foot_puid+'&lg=zh');
                        break;
                    case 'sync':
                        axios.post('{{ route('report.sync') }}',{id:data.id}).then(ret => {
                            if(ret.status == 200){
                                layer.msg('同步成功', {icon: 1});
                            }else{
                                layer.msg(ret.message, {icon: 0});
                            }
                        }).finally(() => {
                            layer.close(loadIndex)
                        });
                        break;
                }
            });
        });


    </script>
@endsection
